<template>
  <view class="app-container">
    <!-- 头部 -->
    <view class="top">
      <view style="display: flex;flex: 4;">
        <view style="margin-right: 20rpx;">
          <u-image width="80rpx" height="80rpx" shape="circle" :src="comment.memberIcon"></u-image>
        </view>
        <view style="line-height: 44rpx;">
          <view>{{ comment.memberNickName }}</view>
          <view>{{ comment.createTime }}</view>
        </view>
      </view>
      <view style="flex: 1;text-align: right;line-height: 80rpx;">{{ subCommentList.length }} 回复</view>
    </view>

    <!-- 商品跳转链接 -->
    <view></view>

    <!-- 评价内容 -->
    <view class="comment-content">
      <view style="display: flex;" v-if="comment.star">
        <u-image style="margin-right: 10rpx;" width="32rpx" height="32rpx" src="/static/image/star.png"
          v-for="i in comment.star"></u-image>
      </view>
      <view style="padding: 20rpx 0;">{{ comment.content }}</view>
      <view v-if="comment.resources != null && comment.resources.length > 0">
        <video v-if="comment.resources[0].type == 'mp4'" :src="comment.resources[0].url" controls></video>
        <view class="media-group">
          <u-image v-if="item.type != 'mp4'" v-for="(item,i) in comment.resources" :key="i" width="150rpx"
            height="150rpx" :src="item.url" style="margin: 5rpx 15rpx 10rpx 0;" @click="previewImg(item.url)">
          </u-image>
        </view>
      </view>
    </view>

    <!-- 回复按钮 -->
    <view style="padding: 30rpx 20rpx;background-color: #FFFFFF;">
      <u-button :custom-style="buttonStyle" @click="replyShow = true">回复</u-button>
    </view>

    <!-- 回复评价 -->
    <view style="background-color: #FFFFFF;" v-if="replyShow">
      <view style="padding: 0 20rpx;">
        <u-input v-model="param.content" type="textarea" :border="true" height="180" />
      </view>
      <view style="padding: 20rpx;display: flex;">
        <u-button class="btn-group" @click="replyShow = false">取消</u-button>
        <u-button class="btn-group" @click="submitReply" :custom-style="buttonStyle">发表</u-button>
      </view>
    </view>
    
    <!-- 评价的回复列表 -->
    <view style="background-color: #FFFFFF;">
      <view v-for="item in subCommentList" style="padding: 20rpx 0;border-bottom: 2rpx solid #E5E5E5;">
        <view class="top" style="padding-top: 0;">
          <view style="margin-right: 20rpx;">
            <u-image width="64rpx" height="64rpx" :src="item.memberIcon" shape="circle"></u-image>
          </view>
          <view>
            <view>{{ item.memberNickName }}</view>
            <view>{{ item.createTime }}</view>
          </view>
        </view>
        <view style="padding: 0 20rpx;">{{ item.content }}</view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        commentId: '',
        // 评价对象
        comment: {},
        // 评价回复列表
        subCommentList: [],
        param: {
          skuId: null,
          spuId: null,
          parentId: null,
          content: null,
          memberNickName: null,
          memberIcon: null,
          commentType: 1
        },
        replyShow: false,
        buttonStyle: {
          color: '#EAEAE3',
          borderColor: '#539A8B',
          backgroundColor: '#539A8B'
        }
      }
    },
    onLoad(e) {
      if (e.commentId == null) {
        return this.$u.toast('获取评价信息失败，请重新进入');
      }
      this.commentId = e.commentId;
      this.getInfo();
      this.getSubList();
    },
    methods: {
      // 获取评价子回复列表
      getSubList() {
        this.$api.request.commentSubList({
          commentId: this.commentId
        }, res => this.subCommentList = res.data)
      },
      // 获取评价详情
      getInfo() {
        try {
          this.$api.request.commentDetailInfo({
            id: this.commentId
          }, res => {
            this.comment = res.data;
            let arr = [];
            for (var i = 0; i < this.comment.star; i++) {
              arr.push(i);
            }
            this.comment.star = arr;
            this.comment.resources = JSON.parse(this.comment.resources);
          })
        } catch (e) {
          console.log(e);
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .app-container {
    color: #333333;
    background: none;

    .top {
      display: flex;
      padding: 20rpx;
      color: #999999;
      background-color: #FFFFFF;
    }

    .comment-content {
      padding: 0 20rpx;
      background-color: #FFFFFF;

      .media-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }

      /deep/ uni-video {
        width: 100%;
      }
    }

    .btn-group {
      width: 49%;
    }

  }
</style>
